<template>
  <!-- 表格------------------------------------------------------------------------------------- -->
  <el-card shadow="always">
    <el-table
      ref="table"
      v-loading="state.loading"
      @row-click="rowClick"
      @selection-change="handleSelectionChange"
      :data="state.list"
      :max-height="height"
      :row-class-name="rowClassName"
    >
      <el-table-column v-if="useSelection" type="selection" width="55" />
      <el-table-column
        v-if="useIndex"
        label="序号"
        width="80"
        type="index"
        align="center"
        fixed="left"
      >
      </el-table-column>
      <template v-for="item in options">
        <slot :name="`before${item.prop}`"> </slot>
        <el-table-column
          :prop="item.prop"
          :label="item.label"
          :min-width="item.width || 180"
          align="center"
          :show-overflow-tooltip="true"
        >
          <template #label>
            <slot :name="`${item.prop}label`"> {{ item.label }}</slot>
          </template>
          <template #default="{ row }">
            <slot :name="item.prop" :row="row">
              <span v-if="item.type == 'select' && item.optionItems.length">
                {{ formatSelect(row[item.prop], item.optionItems) }}</span
              >
              <span v-else>{{
                row[item.prop] === "null" ? "" : row[item.prop]
              }}</span>
            </slot>
          </template>
        </el-table-column>
        <slot :name="`after${item.prop}`"> </slot>
      </template>
      <slot name="default"></slot>

      <slot name="button">
        <el-table-column
          v-if="useAction"
          label="操作"
          align="center"
          fixed="right"
          :minWidth="actionWidth"
        >
          <template #default="scope">
            <div ref="buttonBox">
              <slot name="actionButton" :row="scope.row"> </slot>
            </div>
          </template>
        </el-table-column>
      </slot>
    </el-table>
    <div class="page" v-if="usePage">
      <pagination
        v-if="state.total > 0"
        :total="state.total"
        v-model:page="state.paginat.page"
        v-model:limit="state.paginat.size"
        @pagination="changePage"
      />
    </div>
  </el-card>
</template>

<script setup>
import {
  reactive,
  defineProps,
  onMounted,
  defineEmits,
  defineExpose,
} from "vue";
const props = defineProps({
  useAction: {
    type: Boolean,
    default: true,
  },
  useIndex: {
    type: Boolean,
    default: true,
  },
  useSelection: {
    type: Boolean,
    default: true,
  },

  fetchData: {
    type: Function,
    required: true,
  },
  autoFeatch: {
    type: Boolean,
    default: true,
  },
  filterForm: {
    type: Object,
    default: () => ({}),
  },
  options: {
    type: Array,
    default: () => [],
  },
  actionWidth: {
    type: [String, Number],
    default: "180",
  },
  height: {
    type: [String, Number],
    default: "600",
  },
  usePage: {
    type: Boolean,
    default: true,
  },
  rowClassName: {
    type: Function,
    default: () => {},
  },
});
const emits = defineEmits(["selectionChange", "rowClick"]);
const rowClick = (row) => {
  emits("rowClick", row);
};
const state = reactive({
  loading: true,
  list: [],
  total: 0,
  paginat: {
    page: 1,
    size: 15,
  },
  selectedList: [],
  filterForm: {},
});
const { filterForm } = toRefs(state);
// const buttonBox = ref();
// const acW = computed(() => {
//   console.log(buttonBox.value);
//   return buttonBox.value.offsetWidth;
// });
// console.log(acW);
const done = (data) => {
  state.list = data.list;
  state.total = data.total;
  state.loading = false;
};
const handleSelectionChange = (rows) => {
  state.selectedList = rows;
  emits("selectionChange", rows);
};
const changePage = () => {
  state.loading = true;
  props.fetchData(state.paginat, done);
};
const refresh = (flag) => {
  // if (flag) {
  //   state.paginat.page = 1;
  // }
  state.paginat.page = 1;
  state.loading = true;
  props.fetchData(state.paginat, done);
};
const getSelected = () => {
  return state.selectedList;
};

const getPageForm = () => {
  return state.paginat;
};
onMounted(async () => {
  if (props.autoFeatch) {
    state.loading = true;
    props.fetchData(state.paginat, done);
  }
});
const formatSelect = (data, list) => {
  const node = list.find((item) => item.value == data);
  if (node) {
    return node.label || data;
  } else {
    return data;
  }
};
defineExpose({
  refresh,
  getSelected,
  getPageForm,
});
</script>

<style lang="scss" scoped>
::v-deep tr.red td {
  background-color: rgb(255, 239, 242) !important;
  color: #000 !important;
}

::v-deep .el-table__body .el-table__row.hover-row.red td {
  background-color: rgb(255, 239, 242) !important;
}

::v-deep tr.lightyellow td {
  background-color: rgb(254, 252, 195) !important;
  color: #000 !important;
}

::v-deep .el-table__body .el-table__row.hover-row.lightyellow td {
  background-color: rgb(254, 252, 195);
}

::v-deep tr.deepred td {
  // background-color: #aa0000 !important;/
  background-color: rgb(255, 205, 211) !important;
  color: #333 !important;
}

::v-deep .el-table__body .el-table__row.hover-row.deepred td {
  background-color: rgb(255, 205, 211) !important;
}

::v-deep tr.yellow td {
  background-color: rgb(255, 253, 223) !important;
  color: #000 !important;
}

::v-deep .el-table__body .el-table__row.hover-row.yellow td {
  // background-color: #ffffaf;
  background-color: rgb(255, 253, 223) !important;
}

::v-deep tr.success td {
  background-color: skyblue !important;
  color: #000 !important;
}

::v-deep .el-table__body .el-table__row.hover-row.success td {
  background-color: skyblue;
}
</style>
